<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>

<template>
    <div class="app-container">
        <el-form :inline="true" :model="searchFormData" class="demo-form-inline" size="mini">
            <el-form-item label="所属地区">
                <el-input v-model="searchFormData.hArea" :clearable="true" placeholder="所属地区"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="所属小区">
                <el-input v-model="searchFormData.hEstate" :clearable="true" placeholder="所属小区"
                          style="width: 250px;"></el-input>
            </el-form-item>
            <el-form-item label="单元号">
                <el-input v-model="searchFormData.hUnitnumber" :clearable="true" placeholder="单元号"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="所属楼层">
                <el-input v-model="searchFormData.hFloor" :clearable="true" placeholder="所属楼层"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="a103	房间号">
                <el-input v-model="searchFormData.hRoomno" :clearable="true" placeholder="a103	房间号"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="100平	面积">
                <el-input v-model="searchFormData.hAcreage" :clearable="true" placeholder="100平	面积"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label=" 朝南	朝向">
                <el-input v-model="searchFormData.hDirection" :clearable="true" placeholder=" 朝南	朝向"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="精装 简装	装修">
                <el-input v-model="searchFormData.hFitment" :clearable="true" placeholder="精装 简装	装修"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="是   或者 否	是否双气（天然气 暖气）">
                <el-input v-model="searchFormData.hIsdoubleair" :clearable="true"
                          placeholder="是   或者 否	是否双气（天然气 暖气）" style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="2   3    1	限住人数">
                <el-input v-model="searchFormData.hLimit" :clearable="true" placeholder="2   3    1	限住人数"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="空调 wifi ...	配套设施">
                <el-input v-model="searchFormData.hFacility" :clearable="true" placeholder="空调 wifi ...	配套设施"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label=" 100 出租价格">
                <el-input v-model="searchFormData.hPrice" :clearable="true" placeholder=" 100 出租价格"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="1  已出租 2 未出租 3 停止出租	房屋状态">
                <el-input v-model="searchFormData.hStatus" :clearable="true"
                          placeholder="1  已出租 2 未出租 3 停止出租	房屋状态" style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="保存的是图片地址	房屋图片">
                <el-input v-model="searchFormData.hImg" :clearable="true" placeholder="保存的是图片地址	房屋图片"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="	完整的地址	地址">
                <el-input v-model="searchFormData.hAddress" :clearable="true" placeholder="	完整的地址	地址"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label="添加时间">
                <el-input v-model="searchFormData.hAddtime" :clearable="true" placeholder="添加时间"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item label=" 修改时间">
                <el-input v-model="searchFormData.hUpdatetime" :clearable="true" placeholder=" 修改时间"
                          style="width: 250px;"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="loadTable">查询</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" size="mini" icon="el-icon-plus" style="margin-bottom: 10px;" @click="onAdd">新增
        </el-button>
        <el-table :data="pageInfo.rows" border highlight-current-row>
            <el-table-column prop="hId" label="hId"/>
            <el-table-column prop="hArea" label="所属地区"/>
            <el-table-column prop="hEstate" label="所属小区"/>
            <el-table-column prop="hUnitnumber" label="单元号"/>
            <el-table-column prop="hFloor" label="所属楼层"/>
            <el-table-column prop="hRoomno" label="a103	房间号"/>
            <el-table-column prop="hAcreage" label="100平	面积"/>
            <el-table-column prop="hDirection" label=" 朝南	朝向"/>
            <el-table-column prop="hFitment" label="精装 简装	装修"/>
            <el-table-column prop="hIsdoubleair" label="是   或者 否	是否双气（天然气 暖气）"/>
            <el-table-column prop="hLimit" label="2   3    1	限住人数"/>
            <el-table-column prop="hFacility" label="空调 wifi ...	配套设施"/>
            <el-table-column prop="hPrice" label=" 100 出租价格"/>
            <el-table-column prop="hStatus" label="1  已出租 2 未出租 3 停止出租	房屋状态"/>
            <el-table-column prop="hImg" label="保存的是图片地址	房屋图片"/>
            <el-table-column prop="hAddress" label="	完整的地址	地址"/>
            <el-table-column prop="hAddtime" label="添加时间"/>
            <el-table-column prop="hUpdatetime" label=" 修改时间"/>
            <el-table-column>
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="onTableUpdate(scope.row)">修改</el-button>
                    <el-button type="text" size="mini" @click="onTableDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background style="margin-top: 5px" :current-page="searchFormData.pageIndex"
                       :page-size="searchFormData.pageSize" :page-sizes="[5, 10, 20, 40]" :total="pageInfo.total"
                       layout="total, sizes, prev, pager, next" @size-change="onSizeChange"
                       @current-change="onPageIndexChange"/>
        <!--dialog-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false"
                   @close="resetForm('dialogForm')">
            <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogFormData" label-width="120px"
                     size="mini">
                <el-form-item prop="hArea" label="所属地区">
                    <el-input v-model="dialogFormData.hArea"/>
                </el-form-item>
                <el-form-item prop="hEstate" label="所属小区">
                    <el-input v-model="dialogFormData.hEstate"/>
                </el-form-item>
                <el-form-item prop="hUnitnumber" label="单元号">
                    <el-input v-model="dialogFormData.hUnitnumber"/>
                </el-form-item>
                <el-form-item prop="hFloor" label="所属楼层">
                    <el-input v-model="dialogFormData.hFloor"/>
                </el-form-item>
                <el-form-item prop="hRoomno" label="a103	房间号">
                    <el-input v-model="dialogFormData.hRoomno"/>
                </el-form-item>
                <el-form-item prop="hAcreage" label="100平	面积">
                    <el-input v-model="dialogFormData.hAcreage"/>
                </el-form-item>
                <el-form-item prop="hDirection" label=" 朝南	朝向">
                    <el-input v-model="dialogFormData.hDirection"/>
                </el-form-item>
                <el-form-item prop="hFitment" label="精装 简装	装修">
                    <el-input v-model="dialogFormData.hFitment"/>
                </el-form-item>
                <el-form-item prop="hIsdoubleair" label="是   或者 否	是否双气（天然气 暖气）">
                    <el-input v-model="dialogFormData.hIsdoubleair"/>
                </el-form-item>
                <el-form-item prop="hLimit" label="2   3    1	限住人数">
                    <el-input v-model="dialogFormData.hLimit"/>
                </el-form-item>
                <el-form-item prop="hFacility" label="空调 wifi ...	配套设施">
                    <el-input v-model="dialogFormData.hFacility"/>
                </el-form-item>
                <el-form-item prop="hPrice" label=" 100 出租价格">
                    <el-input v-model="dialogFormData.hPrice"/>
                </el-form-item>
                <el-form-item prop="hStatus" label="1  已出租 2 未出租 3 停止出租	房屋状态">
                    <el-input v-model="dialogFormData.hStatus"/>
                </el-form-item>
                <el-form-item prop="hImg" label="保存的是图片地址	房屋图片">
                    <el-input v-model="dialogFormData.hImg"/>
                </el-form-item>
                <el-form-item prop="hAddress" label="	完整的地址	地址">
                    <el-input v-model="dialogFormData.hAddress"/>
                </el-form-item>
                <el-form-item prop="hAddtime" label="添加时间">
                    <el-input v-model="dialogFormData.hAddtime"/>
                </el-form-item>
                <el-form-item prop="hUpdatetime" label=" 修改时间">
                    <el-input v-model="dialogFormData.hUpdatetime"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onDialogSave">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script type="module" src="./js/axios.js">
    // 创建axios实例
    import axios from '/js/axios.js'

    const client = axios.create({
        baseURL: 'http://localhost:8080', // api 的 base_url
        timeout: 60000 // 请求超时时间,60秒
    })
    export default {
        data() {
            return {
                searchFormData: {
                    hId: '',
                    hArea: '',
                    hEstate: '',
                    hUnitnumber: '',
                    hFloor: '',
                    hRoomno: '',
                    hAcreage: '',
                    hDirection: '',
                    hFitment: '',
                    hIsdoubleair: '',
                    hLimit: '',
                    hFacility: '',
                    hPrice: '',
                    hStatus: '',
                    hImg: '',
                    hAddress: '',
                    hAddtime: '',
                    hUpdatetime: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                pageInfo: {
                    rows: [],
                    total: 0
                },
                dialogVisible: false,
                dialogTitle: '',
                dialogFormData: {
                    hId: '',
                    hArea: '',
                    hEstate: '',
                    hUnitnumber: '',
                    hFloor: '',
                    hRoomno: '',
                    hAcreage: '',
                    hDirection: '',
                    hFitment: '',
                    hIsdoubleair: '',
                    hLimit: '',
                    hFacility: '',
                    hPrice: '',
                    hStatus: '',
                    hImg: '',
                    hAddress: '',
                    hAddtime: '',
                    hUpdatetime: ''
                },
                dialogFormRules: {
                    hId: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hArea: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hEstate: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hUnitnumber: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hFloor: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hRoomno: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hAcreage: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hDirection: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hFitment: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hIsdoubleair: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hLimit: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hFacility: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hPrice: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hStatus: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hImg: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hAddress: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hAddtime: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    hUpdatetime: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }]
                }
            }
        },
        created() {
            this.loadTable()
        },
        methods: {
            loadTable() {
                this.post('/house/list', this.searchFormData, resp => {
                    this.pageInfo.rows = resp.data
                })
            },
            onTableUpdate(row) {
                this.dialogTitle = '修改'
                this.dialogVisible = true
                this.$nextTick(() => {
                    Object.assign(this.dialogFormData, row)
                })
            },
            onTableDelete(row) {
                this.confirm(`确认要删除该记录吗？`, function (done) {
                    const data = {
                        hId: row.hId
                    }
                    this.post('/house/del', data, () => {
                        done()
                        this.tip('删除成功')
                        this.loadTable()
                    })
                })
            },
            onDialogSave() {
                this.$refs.dialogForm.validate((valid) => {
                    if (valid) {
                        const uri = this.dialogFormData.hId ? '/house/update' : '/house/add'
                        this.post(uri, this.dialogFormData, () => {
                            this.dialogVisible = false
                            this.loadTable()
                        })
                    }
                })
            },
            onSizeChange(size) {
                this.searchFormData.pageSize = size
                this.loadTable()
            },
            onAdd() {
                this.dialogTitle = '新增'
                this.dialogVisible = true
                this.dialogFormData.hId = 0
            },
            onPageIndexChange(pageIndex) {
                this.searchFormData.pageIndex = pageIndex
                this.loadTable()
            },
            /**
             * 请求接口
             * @param uri uri
             * @param data 请求数据
             * @param callback 成功时回调
             * @param errorCallback 错误时回调
             */
            post(uri, data, callback, errorCallback) {
                const that = this
                client.post(uri, data).then(function (response) {
                    const resp = response.data
                    const code = resp.code
                    if (code === '0') { // 成功
                        callback && callback.call(that, resp)
                    } else {
                        that.$message.error(resp.msg)
                    }
                }).catch(function (error) {
                    console.error(error)
                    errorCallback && errorCallback(error)
                    that.$message.error(error.message)
                })
            }
        }
    }

</script>
</body>

</html>
